<template>
    <div class="go-example">
        <div style="margin: 0px 0px 30px 20px;display:flex" v-show="!isRight">
            <el-button type="success" circle></el-button>
            <span style="margin: auto 20px;">
                流程已处理
            </span>
            <el-button type="warning" circle></el-button>
            <span style="margin: auto 20px;">
                流程正在处理
            </span>
            <el-button circle></el-button>
            <span style="margin: auto 20px;">
                流程未处理
            </span>
            <div style="margin: 0px 0px 0px 30px;" v-if="showSaveUser">
                <el-button type="primary" size="mini" @click="save">保存人员信息</el-button>
            </div>
        </div>
        <div style="margin: 0px 0px 30px 80px; display: flex; align-items: center; }" v-show="isRight">
            <div class="tableToolbarText tableToolbarTextL">模板名称：</div>
            <vxe-input v-model="flowName" size="mini" placeholder="请输入" clearable @change="chengeFlow"></vxe-input>
            <div style="min-width: 50px; margin-block: auto;" class="tableToolbarText tableToolbarTextL">模板类型：</div>
            <el-select v-model="flowType" class="tableToolbarTextL" size="mini" placeholder="类型" clearable style="min-width: 70px;width:12%" @change="chengeFlow">
                <el-option v-for="item in template.flowTypeOption" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <!--<el-button type="primary" size="mini" class="tableToolbarTextL" id="SaveButton"  v-show="isRight" @click="save(0)" disabled="">保存</el-button>-->
            <div style="margin: 0px 0px 0px 10px;">
                <button style="width: 50px; height: 28px;" id="SaveButton" @click="save()" disabled="">保存</button>
            </div>
        </div>
       
        <div class="go-example-box" id="parentDiv">
            <!--主画布区域-->
            <div ref="diagram" class="go-myDiagramDiv">
                <canvas class="go-canvas-left"
                        tabindex="0"
                        width="954"
                        height="700">
                    This text is displayed if your browser does not support the CanvasHTML element.
                </canvas>
                <div class="go-left-box">
                    <div class="go-left-box-item"></div>
                </div>
            </div>
            <!--右边组件拖拽-->
            <div ref="myPaletteDiv" id="myPaletteDiv" class="go-myPaletteDiv" v-show="isRight">
                <canvas class="go-canvas-right"
                        tabindex="0"
                        width="560"
                        height="700">
                </canvas>
                <div class="go-right-box">
                    <div class="go-right-box-item">
                        工具组件
                    </div>
                </div>
            </div>

        </div>
        <userselectbydept ref="userselectbydept" :multiple="true" @selected="selectedUser" />
    </div>
</template>

<script>
    import userselectbydept from '../../components/SelectUserByDept/index.vue';
    import template from "../../common/json/template.js";
    import workFlowAPI from "../../request/Base/WorkFlowAPI.js";
    export default {
        components: {
            userselectbydept
        },
        name: 'example',
        data() {
            return {
                template,
                myDiagramRefs: null, //这个是为了将初始化的结构保存起来，可以调用go.js的方法
                nodeList: [],
                flowName: null,
                flowType: null,
                clickKey: null,
                showSaveUser:false,
            };
        },
        props: {
            //父组件传过来的json数据
            jsonData: {
                type: Object,
                require: true,
                default: () => ({}),
            },
            // 是否展示右侧的工具栏
            isRight: {
                type: Boolean,
                default: () => false,
            },
            // 是否允许编辑
            canedit: {
                type: Boolean,
                default: () => false,
            },
            // 是否为模板
            isTemplate: {
                type: Boolean,
                default: () => false,
            },
        },
        computed: {
        },
        watch: {
            //监听json数据， 再次初始化
            jsonData: {
                handler(n, o) {
                    this.flowName = this.jsonData.flowName;
                    this.flowType = this.jsonData.flowType;
                    this.load();
                },
            },
        },
        mounted() {
            //调用test方法，初始化画布
            //this.test();
        },
        methods: {
            test() {
                const G = go.GraphObject.make;  // for conciseness in defining templates
                const myDiagram =
                    G(go.Diagram, this.$refs.diagram,  // must name or refer to the DIV HTML element
                        {
                            "initialContentAlignment": go.Spot.Left, //设置整个图表在容器中的位置
                            //"LinkDrawn": this.showLinkLabel,  // this DiagramEvent listener is defined below
                            //"LinkRelinked": this.showLinkLabel,
                            "commandHandler.copiesTree": true,  // 启用复制快捷键
                            "commandHandler.deletesTree": true, // 启用删除快捷键
                            "allowLink": true, //是否允许拖拽连线
                            "allowRelink": true, //是否允许重新连线
                            "undoManager.isEnabled": true, //是否启用撤销回退
                            "isReadOnly": !this.canedit,//设置节点不可拖拽
                            //"layout": G(go.LayeredDigraphLayout,
                            //    {
                            //        direction: 0,//0向右，90向下，180向左，270向上。默认值是0
                            //        layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
                            //        layerSpacing: 60,
                            //    }),
                            //"layout":
                            //    G(ContinuousForceDirectedLayout,  // automatically spread nodes apart while dragging
                            //        { defaultSpringLength: 40, defaultElectricalCharge: 10 }), //设置调节界面自动调整节点位置


                            "SelectionDeleting": function (e) {
                                var parts = e.subject;  // the collection of Parts to be deleted, the Diagram.selection
                                parts.copy().each(function (p) {
                                    if (p instanceof go.Node) {
                                        var node = p;
                                        node.findNodesConnected().each(function (n) {
                                            if (n.category === "Comment") {
                                                n.isSelected = true;  // include in normal deletion process
                                            }
                                        });
                                    } else if (p instanceof go.Link && p.category === "Comment") {
                                        var comlink = p;  // a "Comment" Link
                                        var comnode = comlink.fromNode;
                                        if (comnode.category === "Comment") {
                                            comnode.isSelected = true;  // include in normal deletion process
                                        }
                                    }
                                });
                            }
                        });
                this.myDiagramRefs = myDiagram;
                
                // 监听点击事件
                myDiagram.addDiagramListener("Modified", function (e) {
                    var button = document.getElementById("SaveButton");
                    if (button) button.disabled = !myDiagram.isModified;
                    //var idx = document.title.indexOf("*");
                    //if (myDiagram.isModified) {
                    //    if (idx < 0) document.title += "*";
                    //} else {
                    //    if (idx >= 0) document.title = document.title.substr(0, idx);
                    //}
                });
                //这一句是为了在连线的时候可以帮我自动对齐
                myDiagram.layout = G(go.TreeLayout, { angle: 0, layerSpacing: 100 });
                /** 右键菜单按钮样式 */
                const buttonStyle = {
                    "ButtonBorder.fill": "white",
                    // "ButtonBorder.stroke": "darkcyan",
                    // "ButtonBorder.strokeWidth": 3,
                    "_buttonFillOver": "#E9F5FF",
                    "_buttonStrokeOver": "darkcyan",
                    "_buttonStrokePressed": "darkcyan",
                    "_buttonFillPressed": "pink",
                    visible: !this.canedit && !this.isTemplate,//非模板下且不允许编辑时
                    margin: new go.Margin(10, 10, 10, 10),
                };
                /** 右键功能配置 */
                var myContextMenu = G("ContextMenu", "Vertical",
                    {
                        background: "transparent",
                        width: 100,
                    },
                    G("ContextMenuButton",
                        { ...buttonStyle },
                        G(go.TextBlock, {
                            text: "节点人员",
                            margin: new go.Margin(10, 0, 10, 0),
                        }),
                        {
                            cursor: "pointer",
                            click: (e, obj) => {
                                this.clickKey = obj.part.data
                                this.openSelectUser();
                                //新增节点
                                //var node = {
                                //    parent: key,
                                //    key: nodeDataArray.length + 1,
                                //    text: `子节点${nodeDataArray.length + 1}`,
                                //    // loc: '0 0',//节点位置
                                //}
                                //var linknode = {
                                //    from: key,
                                //    to: nodeDataArray.length + 1
                                //}
                                //diagram.model.addNodeData(node);
                                //diagram.model.addLinkData(linknode);
                            },
                        }
                    ),
                    //G("ContextMenuButton",
                    //    { ...buttonStyle },
                    //    G(go.TextBlock, {
                    //        text: "删除节点",
                    //        margin: new go.Margin(10, 0, 10, 0),
                    //    }),
                    //    {
                    //        cursor: "pointer",
                    //        click: (e, obj) => {
                    //            const key = obj.part.data.key

                    //            // 删除功能应该走接口的 以下代码只是在不对后端接口情况下的效果
                    //            // 先删线
                    //            delLinks(key)
                    //            // 再删除单个节点
                    //            var nodeData = diagram.model.findNodeDataForKey(key);
                    //            diagram.model.removeNodeData(nodeData);
                    //            delNodeLoop()
                    //        },
                    //    }
                    //),
                );
                //普通节点
                myDiagram.nodeTemplateMap.add("Node",  // the default category
                    G(go.Node, "Table", {
                        resizable: true,
                        resizeObjectName: 'SHAPE',
                        selectionObjectName: 'SHAPE',
                    }, nodeStyle(),
                        G(go.Panel, "Auto",
                            { contextMenu: myContextMenu }, //右键菜单
                            G(go.Shape, "Rectangle",
                                {
                                    fill: "#e8f4ff ",//背景
                                    stroke: "#00A9C9",//边框
                                    strokeWidth: 1//边框宽度
                                },
                                new go.Binding("fill", "color")),
                            G(go.TextBlock, textStyle(),
                                {
                                    row: 0,//所在行
                                    column: 1,//所在列
                                    fromLinkable: false,
                                    toLinkable: false,
                                    alignment: go.Spot.Left,//文本对齐
                                    stroke: "#00434C",//标题文字的颜色
                                    margin: new go.Margin(20),//边距
                                    font: "13pt helvetica, arial, sans-serif",//文字样式
                                    maxSize: new go.Size(150, NaN),
                                    wrap: go.TextBlock.WrapFit,
                                    editable: false
                                },
                                new go.Binding("text").makeTwoWay())
                        ),
                        {
                            click: this.nodeClicked,
                        },
                        // four named ports, one on each side:
                        makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
                        makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true),
                        makePort("R", go.Spot.Right, go.Spot.RightSide, true, true),
                        makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false)
                    ));
                //菱形节点
                myDiagram.nodeTemplateMap.add("Conditional",
                    G(go.Node, "Table", nodeStyle(),
                        // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
                        G(go.Panel, "Auto",
                            G(go.Shape, "Diamond",
                                {
                                    fill: "#282c34",
                                    stroke: "#00A9C9",
                                    strokeWidth: 2
                                },
                                new go.Binding("figure", "figure")),
                            G(go.TextBlock, textStyle(),
                                {
                                    margin: 15,
                                    font: 14,
                                    stroke: '#282c34',//文字颜色
                                    maxSize: new go.Size(160, NaN),
                                    wrap: go.TextBlock.WrapFit,
                                    editable: true
                                },
                                new go.Binding("text").makeTwoWay())
                        ),
                        // four named ports, one on each side:
                        makePort("T", go.Spot.Top, go.Spot.Top, false, true),
                        makePort("L", go.Spot.Left, go.Spot.Left, true, true),
                        makePort("R", go.Spot.Right, go.Spot.Right, true, true),
                        makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
                    ));
                //圆形开始
                myDiagram.nodeTemplateMap.add("Start",
                    G(go.Node, "Table", nodeStyle(),
                        G(go.Panel, "Spot",
                            G(go.Shape, "Circle",
                                {
                                    desiredSize: new go.Size(80, 80),
                                    fill: "#4B80FD  ",
                                    stroke: "#09d3ac",
                                    strokeWidth: 1
                                }),
                            G(go.TextBlock, textStyle(),
                                {
                                    row: 0,//所在行
                                    column: 1,//所在列
                                    fromLinkable: false,
                                    toLinkable: false,
                                    stroke: "#00434C",//标题文字的颜色
                                    margin: new go.Margin(20),//边距
                                    font: "13pt helvetica, arial, sans-serif",//文字样式
                                    maxSize: new go.Size(150, NaN),
                                    wrap: go.TextBlock.WrapFit,
                                    editable: true
                                },
                                new go.Binding("text").makeTwoWay()),

                        ),
                        // three named ports, one on each side except the top, all output only:
                        makePort("L", go.Spot.Left, go.Spot.Left, true, false),
                        makePort("R", go.Spot.Right, go.Spot.Right, true, false),
                        makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
                    ));
                //圆形结束
                myDiagram.nodeTemplateMap.add("End",
                    G(go.Node, "Table", nodeStyle(),
                        G(go.Panel, "Spot",
                            G(go.Shape, "Circle",
                                {
                                    desiredSize: new go.Size(80, 80),
                                    fill: "#4B80FD  ",
                                    stroke: "#DC3C00",
                                    strokeWidth: 1
                                }),
                            G(go.TextBlock, textStyle(),
                                {
                                    row: 0,//所在行
                                    column: 1,//所在列
                                    fromLinkable: false,
                                    toLinkable: false,
                                    stroke: "#00434C",//标题文字的颜色
                                    margin: new go.Margin(20),//边距
                                    font: "13pt helvetica, arial, sans-serif",//文字样式
                                    maxSize: new go.Size(150, NaN),
                                    wrap: go.TextBlock.WrapFit,
                                    editable: true
                                },
                                new go.Binding("text").makeTwoWay())
                        ),
                        // three named ports, one on each side except the bottom, all input only:
                        makePort("T", go.Spot.Top, go.Spot.Top, false, true),
                        makePort("L", go.Spot.Left, go.Spot.Left, false, true),
                        makePort("R", go.Spot.Right, go.Spot.Right, false, true)
                    ));
                go.Shape.defineFigureGenerator("File", function (shape, w, h) {
                    var geo = new go.Geometry();
                    var fig = new go.PathFigure(0, 0, true); // starting point
                    geo.add(fig);
                    fig.add(new go.PathSegment(go.PathSegment.Line, .75 * w, 0));
                    fig.add(new go.PathSegment(go.PathSegment.Line, w, .25 * h));
                    fig.add(new go.PathSegment(go.PathSegment.Line, w, h));
                    fig.add(new go.PathSegment(go.PathSegment.Line, 0, h).close());
                    var fig2 = new go.PathFigure(.75 * w, 0, false);
                    geo.add(fig2);
                    // The Fold
                    fig2.add(new go.PathSegment(go.PathSegment.Line, .75 * w, .25 * h));
                    fig2.add(new go.PathSegment(go.PathSegment.Line, w, .25 * h));
                    geo.spot1 = new go.Spot(0, .25);
                    geo.spot2 = go.Spot.BottomRight;
                    return geo;
                });
                //文本备注
                myDiagram.nodeTemplateMap.add("Comment",
                    G(go.Node, "Auto", nodeStyle(), {
                        deletable: false,//禁止删除
                        visible: true
                    }, new go.Binding("visible", "visible"),
                        G(go.Shape, "File",
                            {
                                fill: "#fff",
                                stroke: "#DEE0A3",
                                strokeWidth: 1
                            }),
                        G(go.TextBlock, textStyle(),
                            {
                                fromLinkable: false,
                                toLinkable: false,
                                stroke: "brown",
                                margin: 10,
                                font: "12pt helvetica, arial, sans-serif",//文字样式
                                maxSize: new go.Size(NaN, NaN),
                                //wrap: go.TextBlock.WrapFit,//文本换行
                            },
                            new go.Binding("text", "text"))
                    ));
                myDiagram.linkTemplate =
                    G(go.Link,  // the whole link panel
                        {
                            routing: go.Link.AvoidsNodes,
                            curve: go.Link.JumpOver,
                            corner: 5,
                            toShortLength: 4,
                            relinkableFrom: true,
                            relinkableTo: true,
                            reshapable: true,
                            resegmentable: true,
                            // mouse-overs subtly highlight links:
                            mouseEnter: function (e, link) { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; },
                            mouseLeave: function (e, link) { link.findObject("HIGHLIGHT").stroke = "transparent"; },
                            selectionAdorned: false
                        },
                        new go.Binding("points").makeTwoWay(),
                        G(go.Shape,  // the highlight shape, normally transparent
                            { isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),
                        G(go.Shape,  // the link path shape
                            { isPanelMain: true, stroke: "gray", strokeWidth: 1 },
                            new go.Binding("stroke", "isSelected", function (sel) { return sel ? "dodgerblue" : "gray"; }).ofObject()),
                        G(go.Shape,  // the arrowhead
                            { toArrow: "standard", strokeWidth: 0, fill: "gray" }),
                        G(go.Panel, "Auto",  // the link label, normally not visible
                            { visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5 },
                            new go.Binding("visible", "visible").makeTwoWay(),
                            G(go.Shape, "RoundedRectangle",  // the label shape
                                { fill: "#F8F8F8", strokeWidth: 0 }),
                            G(go.TextBlock, "Yes",  // the label
                                {
                                    textAlign: "center",
                                    font: "10pt helvetica, arial, sans-serif",
                                    stroke: "#333333",
                                    editable: true
                                },
                                new go.Binding("text").makeTwoWay())
                        )
                    );
                myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
                myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;
                //this.load();  // load an initial diagram from some JSON text
                myDiagram.model = go.Model.fromJson(this.jsonData);
                const myPalette =
                    G(go.Palette, this.$refs.myPaletteDiv,  // must name or refer to the DIV HTML element
                        {
                            "animationManager.initialAnimationStyle": go.AnimationManager.None,
                            "InitialAnimationStarting": animateFadeDown, // Instead, animate with this function
                            nodeTemplateMap: myDiagram.nodeTemplateMap,  // share the templates used by myDiagram
                            model: this.nodeList.length > 0 ? new go.GraphLinksModel(this.nodeList) : new go.GraphLinksModel([  // specify the contents of the Palette
                                { category: "Start", text: "开始" },
                                { category: "Node", text: "节点" },
                                { category: "End", text: "结束" },
                                //{ category: "Comment", text: "Comment" }
                            ])
                        });

                myDiagram.linkTemplateMap.add("Comment",
                    // if the BalloonLink class has been loaded from the Extensions directory, use it
                    G((typeof BalloonLink === "function" ? BalloonLink : go.Link),
                        G(go.Shape,  // the Shape.geometry will be computed to surround the comment node and
                            // point all the way to the commented node
                            { stroke: "brown", strokeWidth: 1, fill: "lightyellow" })
                    ));
                /** 节点点击 */


                // helper definitions for node templates
                function nodeStyle() {
                    return [
                        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                        {
                            locationSpot: go.Spot.Center
                        }
                    ];
                };

                function makePort(name, align, spot, output, input) {
                    var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
                    return G(go.Shape,
                        {
                            fill: "transparent",  // changed to a color in the mouseEnter event handler
                            strokeWidth: 0,  // no stroke
                            width: horizontal ? NaN : 8,  // if not stretching horizontally, just 8 wide
                            height: !horizontal ? NaN : 8,  // if not stretching vertically, just 8 tall
                            alignment: align,  // align the port on the main Shape
                            stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
                            portId: name,  // declare this object to be a "port"
                            fromSpot: spot,  // declare where links may connect at this port
                            fromLinkable: output,  // declare whether the user may draw links from here
                            toSpot: spot,  // declare where links may connect at this port
                            toLinkable: input,  // declare whether the user may draw links to here
                            cursor: "pointer",  // show a different cursor to indicate potential link point
                            mouseEnter: function (e, port) {  // the PORT argument will be this Shape
                                if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
                            },
                            mouseLeave: function (e, port) {
                                port.fill = "transparent";
                            }
                        });
                };
                function textStyle() {
                    return {
                        font: "bold 16pt Lato, Helvetica, Arial, sans-serif",
                        stroke: "#F8F8F8"
                    }
                };
                function fillStyle() {
                    return {
                        font: "bold 11pt Lato, Helvetica, Arial, sans-serif",
                        stroke: "#F8F8F8"
                    }
                };

                function showLinkLabel(e) {
                    var label = e.subject.findObject("LABEL");
                    if (label !== null) label.visible = (e.subject.fromNode.data.category === "Conditional");
                };
                function animateFadeDown(e) {
                    var diagram = e.diagram;
                    var animation = new go.Animation();
                    animation.isViewportUnconstrained = true; // So Diagram positioning rules let the animation start off-screen
                    animation.easing = go.Animation.EaseOutExpo;
                    animation.duration = 900;
                    animation.add(diagram, 'position', diagram.position.copy().offset(100, 200), diagram.position);
                    animation.add(diagram, 'opacity', 0, 1);
                    animation.start();
                };
            },

            save() {
                console.log(JSON.parse(this.myDiagramRefs.model.toJson()),this.jsonData)
                if (!this.flowName || !this.flowType){                    this.$message({ type: "warning", message: "流程名称与流程类型不能为空!" });                    return                };                if (this.isRepeat(JSON.parse(this.myDiagramRefs.model.toJson()).nodeDataArray.map(x=>x.key))) {                    this.$message({ type: "warning", message: "流程节点名称不能重复!" });                    return                };                var data = {                    flowType: this.flowType,                    flowName: this.flowName,                    rowData: JSON.parse(this.myDiagramRefs.model.toJson()),                };                this.$emit('getJsonDataList', data);                this.myDiagramRefs.isModified = false;
                //this.$emit('getJsonDataList', JSON.parse(this.myDiagramRefs.model.toJson()));
                //document.getElementById("mySavedModel").value = this.myDiagramRefs.model.toJson();
            },
            load() {
                //this.myDiagramRefs.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
                //加上定时器延时一下，防止操作过早，节点还未渲染而不生效

                setTimeout(() => {
                    this.myDiagramRefs.model = go.Model.fromJson(this.jsonData);
                    this.myDiagramRefs.isModified = true;
                    // ROOT是节点的key，想让哪个节点当中心点，就写哪个节点的key
                    //this.myDiagramRefs.commandHandler.scrollToPart(this.myDiagramRefs.findNodeForKey('-1'));
                }, 1000)
            },
            openSelectUser() {
                console.log(this.clickKey)
                var users = this.clickKey.userList;
                this.$refs.userselectbydept.selectUsers = JSON.parse(JSON.stringify(users));
                this.$refs.userselectbydept.show();
            },
            selectedUser(user) {
                if (user.length > 0) {
                    var clickKey = this.jsonData.nodeDataArray.find(x => x.key === this.clickKey.key);
                    clickKey.userList = user;
                    var userText = '';
                        user.forEach(x => {
                            userText += x.realName + '\n'
                        });
                    if (this.jsonData.nodeDataArray.findIndex(x => x.key === (this.clickKey.text + '人员')) === -1) {
                        this.jsonData.nodeDataArray.push({
                            key: this.clickKey.text + '人员',
                            text: userText,
                            category: "Comment",
                        });
                        this.jsonData.linkDataArray.push({
                            from: this.clickKey.text + '人员',
                            to: this.clickKey.key,
                            category: "Comment"
                        });
                    } else {
                        var arr = this.jsonData.nodeDataArray.find(x => x.key === (this.clickKey.text + '人员'));
                        arr.text = '';
                        user.forEach(x => {
                            arr.text += x.realName + '\n'
                        });
                    };
                    this.load();
                    this.showSaveUser = true;
                } 
                //var data = [
                //];
                //workFlowAPI.saveUsersToNode(data).then(res => {

                //})
            },
            
            nodeClicked(e, obj) {
                if (!this.canedit && this.jsonData.linkDataArray.length > 0) {
                    this.jsonData.linkDataArray.forEach(x => {
                        if (x.to === obj.part.data.key) {
                            var nodeData = this.myDiagramRefs.model.findNodeDataForKey(x.from);
                            var isShow = this.jsonData.nodeDataArray.find(y => y.key === x.from).visible;
                            nodeData.visible === true ? nodeData.visible = false : nodeData.visible = true;//text 是节点data中的一个属性
                            this.myDiagramRefs.model.updateTargetBindings(nodeData);
                        } else {
                            var nodeData = this.myDiagramRefs.model.findNodeDataForKey(x.from);
                            var isShow = this.jsonData.nodeDataArray.find(y => y.key === x.from).visible;
                            nodeData.visible = false;//text 是节点data中的一个属性
                            this.myDiagramRefs.model.updateTargetBindings(nodeData);
                        }
                    })
                }
            },
            chengeFlow() {
                // 修改名称和类型时
                var button = document.getElementById("SaveButton");
                if (button) button.disabled = false;
            },
            isRepeat(arr) {
                var hash = {};
                for (var i in arr) {
                    if (hash[arr[i]])
                        return true;
                    hash[arr[i]] = true;
                }
                return false;
            },
            printDiagram() {
                const svgWindow = window.open();
                if (!svgWindow) return; // failure to open a new Window
                const printSize = new go.Size(700, 960);
                const bnds = myDiagram.documentBounds;
                let { x } = bnds;
                let { y } = bnds;
                while (y < bnds.bottom) {
                    while (x < bnds.right) {
                        const svg = myDiagram.makeSvg({
                            scale: 1.0,
                            position: new go.Point(x, y),
                            size: printSize,
                        });
                        svgWindow.document.body.appendChild(svg);
                        x += printSize.width;
                    }
                    x = bnds.x;
                    y += printSize.height;
                }
                setTimeout(() => svgWindow.print(), 1);
            },
        },
        template: `#template`
    };
</script>


